<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:s="http://jboss.com/products/seam/taglib"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:rich="http://richfaces.org/rich"
	xmlns:a4j="http://richfaces.org/a4j">

		
	
		<a4j:form id="AddRefForm">
		
			<!-- ************************************ -->
			<!-- *****  REFERENCE HEADER  ***** -->
			<!-- ************************************ -->
			<rich:panel styleClass="form">
			<a4j:outputPanel id="ToMsg"> 
				<h:messages globalOnly="false" styleClass="message"/>
			</a4j:outputPanel>
			<f:facet name="header"><h:outputText value="Datos de la Referencia" /></f:facet>
					
						<s:decorate template="/layout/input.xhtml">
							<ui:define name="label">Referencia</ui:define>
							<rich:comboBox value="#{editRef.refHeadToAdd}"
								id="AddRefHeadCode" required="true" size="30"
								requiredMessage="Favor seleccione el Codigo de Referencia"
								enableManualInput="true"
								converter="#{refConverter}"
								defaultLabel="Persona">
								<a4j:support event="onselect" ajaxSingle="true" action="#{editRef.loadReDetails()}"/>
		
								<s:selectItems var="refHead" value="#{withinHolder.refHeadList()}">
									<h:outputText value="#{refHead.descrip}" />
								</s:selectItems>
		
		
							</rich:comboBox>
							<div class="msg_container">
								<rich:message for="AddRefHeadCode" />
							</div>
						</s:decorate>
						<div style="clear: both;" />

						

					
			</rich:panel>
		</a4j:form>


		<!-- *************************************** -->
		<!-- *********  Person Addresses  ********* -->
		<!-- *************************************** -->
			
		<a4j:form id="AddRefDetForm">
			<rich:simpleTogglePanel styleClass="form" switchType="ajax" opened="false" ajaxSingle="true" >
			<f:facet name="header"><h:outputText value="Agregar Detalle" /></f:facet>
				<h:panelGrid>
					<div class="attributes">
		
						<s:decorate template="/layout/input.xhtml">
							<ui:define name="label">Descripcion</ui:define>
							<h:inputText id="desc" maxlength="40"
								value="#{editRef.refDetToAdd.descrip}"
								required="true" size="30"
								requiredMessage="Favor introduzca la descripcion"
								validatorMessage="La direccion no puede ser menor a 10 o mayor a 40">
								<f:validateLength minimum="10" maximum="40" />
								<a4j:support event="onblur" ajaxSingle="true"/>
							</h:inputText>
							<div class="msg_container">
								<rich:message for="desc" />
							</div>
						</s:decorate>
						<div style="clear: both" />
						<s:decorate template="/layout/input.xhtml">
							<ui:define name="label">Descripcion Abrev.</ui:define>
							<h:inputText id="descAbrev" maxlength="40"
								value="#{editRef.refDetToAdd.shortname}"
								required="true" size="30"
								requiredMessage="Favor introduzca la descripcion Abreviada"
								validatorMessage="La direccion no puede ser menor a 10 o mayor a 40">
								<f:validateLength minimum="10" maximum="40" />
								<a4j:support event="onblur" ajaxSingle="true"/>
							</h:inputText>
							<div class="msg_container">
								<rich:message for="descAbrev" />
							</div>
						</s:decorate>
						<div style="clear: both" />
						<s:decorate template="/layout/input.xhtml">
							<ui:define name="label">Activo</ui:define>
							<h:selectBooleanCheckbox id="DetActive"
								value="#{editRef.refDetToAdd.status}"
								disabled="true">
								<a4j:support event="onblur" ajaxSingle="true" />
								<a4j:support event="onclick" ajaxSingle="true">
									<s:conversationId />
								</a4j:support>
							</h:selectBooleanCheckbox>
							<div class="msg_container">
								<rich:message for="DetActive" />
							</div>
						</s:decorate>
						
						
					</div>
						<s:decorate template="/layout/displayButton.xhtml" styleClass="button_form">
							<a4j:commandButton id="AddDet" value="Agregar Detalle" styleClass="button"
							action="#{editRef.detToAdd()}" reRender="AddRefDetForm, AddRefHeadGrid" />
		
							<rich:spacer width="20px" />
							
							<a4j:region id="DetDelRegion">
								<a4j:commandButton value="Eliminar Seleccionados" action="#{editRef.deleteRefDet()}"
									reRender="AddRefHeadGrid" styleClass="button" />
							</a4j:region>
		
						</s:decorate>
				</h:panelGrid>
			</rich:simpleTogglePanel>
		</a4j:form>
		
		<a4j:form id="AddRefHeadGrid" ajaxSingle="true">
			<rich:datascroller align="center" for="AddrDet"
				maxPages="15" page="#{dataTableScrollerBean.scrollerPage}"
				renderIfSinglePage="false" />
					   			
			<div style="clear: both;" />
			<rich:panel styleClass="table_add" rendered="#{not empty editRef.refDetToAddCollection}">
			<rich:dataTable id="AddrDet"
				var="refDet" rows="3"
				value="#{editRef.refDetToAddCollection}"
				rendered="#{not empty editRef.refDetToAddCollection}"
				rowClasses="rvgRowOne,rvgRowTwo"
				style="width:70%; margin-left:15%;">
				
				<rich:column>
					<f:facet name="header"><h:outputText value="Descripcion" /></f:facet>
					
					<h:outputText value="#{refDet.descrip}" />
				</rich:column>
				<rich:column>
					<f:facet name="header"><h:outputText value="Descripcion Abrev." /></f:facet>
					
					<h:outputText value="#{refDet.shortname}" />
				</rich:column>

				<rich:column>
					<f:facet name="header"><h:outputText value="Activo" /></f:facet>
					
					<h:outputText value="#{convertAssist.booleanToString(refDet.status)}" />
				</rich:column>
				

				<rich:column>
					<f:facet name="header"><h:outputText value="Operaciones" /></f:facet>
					
					<h:selectBooleanCheckbox id="check" value="#{refDet.selected}" >
						
						
					</h:selectBooleanCheckbox>
					<rich:toolTip value="Seleccionar elemento a eliminar" for="check" />
				</rich:column>

			</rich:dataTable>
			</rich:panel>
			
		</a4j:form>
        	

		<a4j:form id="PersonAction">
		<rich:panel styleClass="action_form">
			<h:panelGrid>
				<s:decorate template="/layout/displayButton.xhtml"
					styleClass="button_form">
					<a4j:commandButton value="Guardar"
						action="#{editRef.addRefDetails()}"
						styleClass="button" reRender="AddPersonForm, AddAdressForm, AddAdressGrid, AddDocForm, AddDocGrid, AddPhoneForm, AddPhoneGrid" process="AddPersonForm" status="stateStatus"
						oncomplete="window.location.reload()">

					</a4j:commandButton>
					<rich:spacer width="10px" />
					<a4j:status id="stateStatus" styleClass="status_msg">
							<f:facet name="start">
								<h:graphicImage value="/img/ajax/ajax_load_02.gif"/>
							</f:facet>
					</a4j:status>
					<rich:spacer width="10px" />
					<a4j:commandButton value="Cancelar"
						action="#{editRef.cancelData()}"
						reRender="AddPersonForm, AddAdressForm, AddAdressGrid, AddDocForm, AddDocGrid, AddPhoneForm, AddPhoneGrid" styleClass="button"
						oncomplete="window.location.reload()"/>

				</s:decorate>
			</h:panelGrid>
			</rich:panel>
		</a4j:form>

		



</ui:composition>